<template>
	<view>
		<uni-row class="card-row" :gutter="5">
			<uni-col v-for="item of list" :key="item.id" :span="12">
				<image style="width: 100%;" :src="item.taskImg[0]" mode="widthFix" @click="onItemClick(item.id)"></image>
				<view class="card-title">{{ item.taskName }}</view>
			</uni-col>
		</uni-row>
		<uni-load-more :status="status" :contentText="CONTENT_TEXT" @clickLoadMore="loadMore"></uni-load-more>
	</view>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { fetchMainlineActiveList, fetchMainlineAwardList } from '../../api/adventure.js'
import { CONTENT_TEXT, PAGE_SIZE } from '../../utils/constant.js'

const status = ref('more')
const currentPage = ref(0)
const list = ref([])
let type = '0'

const loadData = async () => {
	const dataRequest = type === '0' ? fetchMainlineAwardList : fetchMainlineActiveList
	const { success, data } = await dataRequest({
		pageNum: currentPage.value,
		pageSize: PAGE_SIZE
	})
	return data
}

const loadMore = async () => {
	if (status.value !== 'more') return
	currentPage.value += 1
	status.value = 'loading'
	const data = await loadData()
	if (data.length > 0) {
		list.value = [...list.value, ...data.map(item => {
			return {
				...item,
				taskImg: item.taskImg.split(';')
			}
		})]
		status.value = 'more'
	} else {
		status.value = 'noMore'
	}
	
}

const onItemClick = (id) => {
	const page = type === '0' ? '/pages/home/winPrizeDetail' : '/pages/my/taskDetail'
	uni.navigateTo({
		url: `${page}?id=${id}`
	})
}

onMounted(() => {
	loadMore()
})

onLoad((query) => {
	type = query.type
})
</script>

<style scoped lang="scss">
.card-title {
	text-align: center;
}
</style>
